import React, { Component } from 'react'
import '../assets/css/bootstrap.min.css'
import axios from 'axios'

export default class Adduser extends Component {

  constructor(props) {
    super(props);
    this.state = {
      // 用户数据源
      userinfo: {
        username: '',
        password: '',
        sex: '男',
        hobbies: [],
        intro: ''
      }
    }

    // 建议以后写在这样，性能更好一次
    this.setValue = this.setValue.bind(this)
    this.dopost = this.dopost.bind(this)
  }

  // 默认处理的string类型  checkbox数组
  setValue(evt) {
    let value = evt.target.value
    let name = evt.target.name
    let type = evt.target.type
    if ('checkbox' === type) {
      // hobbies 数组
      let tmpValue = this.state.userinfo[name]
      tmpValue.push(value)
      this.setState(state => state.userinfo[name] = tmpValue)
    } else {
      this.setState(state => state.userinfo[name] = value)
    }
  }

  // 表单提交
  async dopost() {
    let userinfo = this.state.userinfo
    let data = await axios.post('/v1/api/users',userinfo)
    console.log(data)
  }


  render() {
    let { userinfo } = this.state
    return (
      <div className="container">
        <form>
          <div className="form-group">
            <label>账号：
              <input type="text" name="username" className="form-control" value={userinfo.username} onChange={this.setValue} />
            </label>
          </div>
          <div className="form-group">
            <label>密码：
              <input type="text" name="password" className="form-control" value={userinfo.password} onChange={this.setValue} />
            </label>
          </div>
          <div className="form-group">
            <div>性别：</div>
            <div className="radio">
              <label>
                <input type="radio" name="sex" value='男' checked={userinfo.sex === '男' ? true : false} onChange={this.setValue} />
              男
            </label>
            </div>
            <div className="radio">
              <label>
                <input type="radio" name="sex" value='女' checked={userinfo.sex === '女' ? true : false} onChange={this.setValue} />
              女
            </label>
            </div>
          </div>
          <div className="form-group">
            <div>爱好：</div>
            <div className="checkbox">
              <label>
                <input type="checkbox" name="hobbies" value="写代码" onChange={this.setValue} />写代码
              </label>
            </div>
            <div className="checkbox">
              <label>
                <input type="checkbox" name="hobbies" value="看书" onChange={this.setValue} />看书
              </label>
            </div>
            <div className="checkbox">
              <label>
                <input type="checkbox" name="hobbies" value="交友" onChange={this.setValue} />交友
              </label>
            </div>
          </div>
          <div className="form-group">
            <div>简介</div>
            <textarea className="form-control" name="intro" rows="3" value={userinfo.intro} onChange={this.setValue}></textarea>
          </div>

          <button type="button" onClick={this.dopost} className="btn btn-success">添加用户</button>
        </form>

      </div>
    )
  }
}
